<template>
    <div class="fill-form-collapse">
        <el-collapse v-model="collapseActive">
            <el-collapse-item :name="currentList.length">
                <template slot="title">
                    <slot name="collapseName"></slot>
                </template>
                <template v-for="(item) in currentList">
                    <template v-if="item.itemType === 1 && type !== 'wechat'">
                        <fill-in-table ref="FillInTable" :list.sync="item.items" :id="item.id" :key="item.id">
                            <template v-slot:titleName>
                                <span class="control-item-name">{{item.name}}{{ item.unitKindName ? `(${item.unitKindName})` : "" }}</span>
                            </template>
                        </fill-in-table>
                    </template>
                    <template v-if="item.itemType === 1 && type === 'wechat'">
                        <div :key="item.id" class="form-wechat-table">
                            <span class="control-item-name">{{item.name}}{{ item.unitKindName ? `(${item.unitKindName})` : "" }}</span>
                            <template v-for="(it) in item.items">
                                <fill-in-item :item.sync="it" :key="it.id">
                                    <template v-slot:titleName>
                                        <span class="control-item-name" :class="{'is_required': item.required}">{{it.name}}{{ it.unitKindName ? `(${it.unitKindName})` : "" }}</span>
                                    </template>
                                </fill-in-item>
                            </template>
                            <el-button class="add-btn" type="primary">添加</el-button>
                        </div>
                    </template>
                    <template v-if="item.itemType === 2 && _checkShow(item)">
                        <fill-in-item :disabledIdList="disabledIdList" :item.sync="item" :key="item.id">
                            <template v-slot:titleName>
                                <span class="control-item-name" :class="{'is_required': item.required}">{{item.name}}{{ item.unitKindName ? `(${item.unitKindName})` : "" }}：</span>
                            </template>
                        </fill-in-item>
                    </template>
                </template>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script lang="ts">
import { Component, Prop } from "vue-property-decorator";
import FillInItem from "./item.vue";
import FillInTable from "./table.vue";
import FillInMixin from "./mixin";

@Component({
    components: {
        FillInItem,
        FillInTable
    }
})
export default class FillInGroupItem extends FillInMixin {
    @Prop({ default: "" }) private type: any

    // 禁用的表单项id
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly disabledIdList!: any[];

    collapseActive: any[] = []

    created() {
        this.collapseActive = [this.currentList.length];
    }

    save() {
        const fillInTable: any = this.$refs.FillInTable || [];
        const table = fillInTable.map((item: any) => item.save());
        return table;
    }
}
</script>

<style lang="scss" scoped>
</style>
